<template>
  <div class="h-scroll">
    <div class="head">
      <div class="title">{{ title }}</div>
      <div class="subtitle">{{ subtitle }}</div>
    </div>
    <div class="wrapper" ref="wrapper">
      <div class="content" ref="content">
        <div
          class="card"
          v-for="item of c_cardLists"
          :key="item.id"
          @click="todetail(item.desc)"
        >
          <div class="img">
            <img v-lazy="item.imgUrl" alt="游戏图片" />
          </div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import ObserveDom from "@better-scroll/observe-dom";
BScroll.use(ObserveDom);
export default {
  name: "h-scroll",
  props: {
    title: {
      type: String,
      default: "每日新发现",
    },
    subtitle: {
      type: String,
      default: "更多",
    },
    c_cardLists: Array,
  },
  methods: {
    todetail(title) {
      this.$router.push({
        path: "detail",
        query: {
          gameName: title,
        },
      });
    },
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      startX: 0,
      click: true,
      scrollX: true,
      scrollY: false,
      eventPassthrough: "vertical",
      observeDOM: true,
    });
  },
};
</script>
<style lang="scss" scoped>
.h-scroll {
  margin-top: 0.2rem;
  background: white;
  padding: 4vw;
  display: flex;
  flex-direction: column;
  .wrapper {
    width: 100vw;
  }
  .head {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: $cardTitleSize;
    }
    .title::before {
      content: "▎ ";
      color: $themeColor;
    }
    .subtitle {
      color: $themeColor;
    }
  }
  .content {
    // overflow: scroll;
    width: 10.5rem;
    &::-webkit-scrollbar {
      display: none;
    }
    white-space: nowrap;
    display: flex;
    height: $cardListHeight;
    .card:nth-child(1) {
      margin-left: 0;
    }
    .card {
      margin-top: 0.2rem;
      margin-left: 0.2rem;
      .img img {
        width: $cardSize;
      }
      .img img[lazy="loading"] {
        width: $cardSize;
        height: $cardSize;
      }
      .desc {
        width: $cardSize;
        margin-top: 0.2rem;
        font-size: $subTitleFontSize;
        text-align: center;
        @include ellipsis;
      }
    }
  }
}
</style>